<template>
  <div>
    <el-radio-group v-model="isCollapse" style="margin-top:-40px;float: left">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
             :collapse="isCollapse">

      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">网站内容管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="column">留言管理</el-menu-item>
          <el-menu-item index="1-2" @click="column">文章管理</el-menu-item>
          <el-menu-item index="1-3" @click="column">文章审核</el-menu-item>
          <el-menu-item index="1-4" @click="column">栏目管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1" @click="column">权限管理</el-menu-item>
          <el-menu-item index="2-2" @click="column">模块管理</el-menu-item>
          <el-menu-item index="2-3" @click="column">角色分配</el-menu-item>
          <el-menu-item index="2-4" @click="column">人员管理</el-menu-item>
          <el-menu-item index="2-5" @click="column">角色管理</el-menu-item>
          <el-menu-item index="2-6" @click="column">默认功能设置</el-menu-item>
          <el-menu-item index="2-7" @click="column">首页消息设置</el-menu-item>
          <el-menu-item index="2-8" @click="column">码表管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "managerNavigation",
    data() {
      return {
        isCollapse: false,
      }
    },
    props:{
        columnIndex:''
    },
    methods: {
      column:function (key) {
        let index = key.index;
        // console.log(index);
        this.$emit('getIndex',index);
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 200px;
  }

  .el-submenu .el-menu-item {
    height: 40px;
    line-height: 40px;
    padding: 0 45px;
    min-width: 200px;
  }
</style>
